<template>
  <div id="detScoreLine" class="main">
    <div>
      <div class="my-tab df curr">
        <div
          style="margin: 10px 30px 10px 0"
          class="tab-item"
          :class="{ active: activeType == 1 }"
          @click="handleTabItem('1')"
        >
          院校分数线
        </div>
        <div
          @click="handleTabItem('2')"
          :class="{ active: activeType == 2 }"
          class="tab-item"
        >
          专业分数线
        </div>
      </div>

      <!-- 院校分数线 -->
      <div class="table-contaier" v-show="activeType == '1'">
        <div v-for="(item, index) in yearlineData" :key="index">
          <div class="page-content-list">
            <div style="" id="my-table">
              <div class="my-select">
                <el-select
                  no-data-text="暂无数据"
                  v-model="selecttextDX5[index]"
                  placeholder=" "
                  style="width: 90px"
                >
                  <el-option
                    v-for="newa in popArrDX5[index]"
                    :key="newa"
                    :label="newa"
                    :value="newa"
                  />
                </el-select>
              </div>
              <div style="background: #fff">
                <table class="my-table head">
                  <thead class="my-table-head">
                    <tr>
                      <th width="80">年份</th>
                      <th class="text-left pl20">院校(招生方向)</th>
                      <!---->
                      <th width="80">批次/段</th>
                      <th width="80">录取数</th>
                      <th width="80">最高分</th>
                      <th width="80">最低分</th>
                      <th width="80">平均分</th>
                      <th width="80">最低位次</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
            <table
              v-show="item2.name == selecttextDX5[index]"
              class="my-table body"
              v-for="(item2, index2) in item.courses"
              :key="index2"
            >
              <tbody class="my-table-body">
                <tr v-for="(item3, index22) in item2.fractions" :key="index22">
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.year || '-' }}</span>
                  </td>
                  <td class="pt20 pb20 pl20">
                    <span class="cntext f14">{{
                      item3.collegeNameText || '-'
                    }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.batch || '-' }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.enterNum || '-' }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.maxScore || '-' }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.minScore || '-' }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.avgScore || '-' }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item3.minRank || '-' }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 专业分数线 -->
      <div
        v-loading="majorLineLoading"
        v-show="activeType == '2' && isVIP != '0'"
      >
        <div class="select-box">
          <el-select
            no-data-text="暂无数据"
            v-model="selecttextDX6"
            placeholder=" "
            @change="yearChange"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX6"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <el-select
            no-data-text="暂无数据"
            @change="subjectChange"
            v-model="selecttextDX7"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in popArrDX7"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <el-select
            no-data-text="暂无数据"
            v-model="selecttextDX8"
            placeholder=" "
            @change="levelChange"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX8"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
        <div class="page-content-list">
          <div class="mb20">
            <div
              style="
                height: 36px;
                position: sticky;
                top: 146px;
                left: 0;
                background: #fff;
              "
            >
              <!-- style="top: 164px; width: 1160px" -->
              <table class="my-table head">
                <thead class="my-table-head">
                  <tr>
                    <th width="80">年份</th>
                    <th class="text-left pl20">专业名称</th>
                    <th width="80">选科</th>
                    <th width="80">录取数</th>
                    <th width="80">最高分</th>
                    <th width="80">最低分</th>
                    <th width="80">平均分</th>
                    <th width="80">最低位次</th>
                  </tr>
                </thead>
              </table>
            </div>

            <table class="my-table body">
              <tbody class="my-table-body">
                <tr
                  v-for="(item, index) in planList"
                  :key="index"
                  :style="
                    item.dataType === 'c'
                      ? { height: '100px', background: '#f0f0f0' }
                      : {}
                  "
                >
                  <td width="80" class="text-center">
                    <span class="cntext">{{ item.year || '-' }}</span>
                  </td>
                  <td class="pt20 pb20 pl20">
                    <div v-if="item.dataType == 'c'">
                      <div class="f16">
                        <span style="margin-right: 10px">{{
                          item.collegeCode
                        }}</span
                        ><span>{{ item.collegeName }}</span>
                      </div>
                      <div>
                        {{ item.collegeNameText }}(专业数{{
                          item.professionNum
                        }})
                      </div>
                    </div>
                    <span v-else class="cntext f14"
                      >{{ item.professionName || '-' }}{{ item.remark }}</span
                    >
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{
                      item.chooseSubjectText || '不限'
                    }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{
                      item.enterNum || item.uEnterNum || '-'
                    }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{
                      item.maxScore || item.uMaxScore || '-'
                    }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{
                      item.minScore || item.uMinScore || '-'
                    }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{
                      item.avgScore || item.uAvgScore || '-'
                    }}</span>
                  </td>
                  <td width="80" class="text-center">
                    <span class="cntext">{{
                      item.minRank || item.uMinRank || '-'
                    }}</span>
                  </td>
                </tr>
              </tbody>
            </table>

            <div
              v-if="planList.length <= 0"
              style="text-align: center; color: #909399e0; margin-top: 50px"
              class="f14"
            >
              暂无数据
            </div>
          </div>
        </div>
      </div>
    </div>

    <noIsVIP v-show="activeType === '2' && isVIP == 0"></noIsVIP>
    <div>
      <tipsCard :tipsData="tipsData" :type="true" />
    </div>
  </div>
</template>

<script setup>
import noIsVIP from '@/components/noIsVip/noIsVip';
import {
  getSchoolYearline,
  getSchoolScorelineFilter,
  getSchoolScoreline,
  noteDesc,
} from '@/api/scoreline/scoreline';

import tipsCard from '@/components/TipsCard';

import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
import { useStore } from 'vuex';
const majorLineLoading = ref(false);
const store = useStore();
const activeType = ref('1');
const selecttextDX5 = ref([]);
const popArrDX5 = ref([]);
const requestData = ref({
  pid: store.getters.user.userInfo.pid,
  collegeCode: route.query.collegecode || '',
});
const isVIP = computed(() => {
  return store.getters.user.userInfo.isVIP;
});
const tipsData = ref({
  isShowIcon: true,
  tipsList: [],
  portDescription: '',
});
// requestData.value.code =
const fetchNoteDesc = () => {
  // 获取分数线描述信息
  noteDesc({
    type: 'collegeScoreLineDescription',
    pid: store.getters.user.userInfo.pid,
  }).then((res) => {
    tipsData.value.portDescription = res.data.data.collegeScoreLineDescription;
  });
};
fetchNoteDesc();

const yearChange = (val) => {
  let resFilter = allYearData.value.filter((v) => v.year == val);
  popArrDX7.value = resFilter[0].course;
  selecttextDX7.value = popArrDX7.value[0];
  popArrDX8.value = resFilter[0].batch;
  selecttextDX8.value = popArrDX8.value[0];
  fetchSchoolScoreline();
};
const subjectChange = (val) => {
  selecttextDX7.value = val;
  fetchSchoolScoreline();
};
const levelChange = (val) => {
  selecttextDX8.value = val;
  fetchSchoolScoreline();
};
const handleTabItem = (type) => {
  activeType.value = type;
};
const yearlineData = ref({});
const fetchSchoolYearline = () => {
  getSchoolYearline(requestData.value).then((res) => {
    if (res.data.code == 20000) {
      popArrDX5.value = [];
      yearlineData.value = res.data.data;
      res.data.data.forEach((item) => {
        let arr = [];
        item.courses.forEach((item2) => {
          arr.push(item2.name);
        });
        popArrDX5.value.push(arr);
        selecttextDX5.value.push(arr[0]);
      });
    }
  });
};
fetchSchoolYearline();
// 获取年份筛选条件
const popArrDX6 = ref([]);
const popArrDX7 = ref([]);
const popArrDX8 = ref([]);
const allYearData = ref([]);
const selecttextDX6 = ref('');
const selecttextDX7 = ref('');
const selecttextDX8 = ref('');
const fetchSchoolScorelineFilter = () => {
  getSchoolScorelineFilter({ pid: store.getters.user.userInfo.pid }).then(
    (res) => {
      if (res.data.code == 20000) {
        popArrDX6.value = [];
        popArrDX7.value = [];
        popArrDX8.value = [];
        allYearData.value = res.data.data.years;
        res.data.data.years.forEach((item) => {
          popArrDX6.value.push(item.year);
        });
        popArrDX7.value = res.data.data.years[0].course;
        popArrDX8.value = res.data.data.years[0].batch;
        // this.getSchoolPlan()
        selecttextDX6.value = popArrDX6.value[0] || '';
        selecttextDX7.value = popArrDX7.value[0] || '';
        selecttextDX8.value = popArrDX8.value[0] || '';
        // 专业分数线
        fetchSchoolScoreline();
      }
    },
  );
};

const planList = ref([]);
const fetchSchoolScoreline = () => {
  let reqData = {
    pid: store.getters.user.userInfo.pid || '',
    collegeCode: route.query.collegecode || '',
    year: selecttextDX6.value,
    course: selecttextDX7.value,
    batch: selecttextDX8.value,
  };
  majorLineLoading.value = true;
  getSchoolScoreline(reqData)
    .then((res) => {
      if (res.data.code == 20000) {
        planList.value = res.data.data;
        majorLineLoading.value = false;
      } else {
        majorLineLoading.value = false;
      }
    })
    .catch(() => {
      majorLineLoading.value = false;
    });
};
// 院校分数线
if (isVIP.value != 0) {
  fetchSchoolScorelineFilter();
}
</script>

<style lang="scss" scoped>
#detScoreLine {
  margin-bottom: 150px;

  .my-tab {
    position: sticky;
    top: 45px;
    left: 0;
    padding-bottom: 10px;
    background: #fff;
    z-index: 999;

    .tab-item {
    }
  }
}

.my-table {
  width: 100%;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  border-collapse: collapse;
  border-spacing: 0;
}

.my-table-head {
  border-left: 1px solid #e8e8e8;
  width: 100%;
}

.my-table .my-table-head th {
  border-bottom: 1px solid #e8e8e8;
  padding: 9px 0;
  font-size: 12px;
  color: #86909c;
}

.my-table .my-table-body td {
  font-size: 12px !important;
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
}

.text-left {
  text-align: left !important;
}

.my-select {
  // position: sticky;
  // top: 85px;
  // left: 0;
  background: #fff;
  padding: 0 0 20px 0;
}

.body {
  border-top: none;
}

.page-content-list {
  // margin-top: 20px;
  // position: sticky;
  // top: 95px;
  // left: 0;
}

#my-table {
  position: sticky;
  top: 95px;
  left: 0;
}

.select-box {
  position: sticky;
  top: 99px;
  left: 0;
  background: #fff;
  padding-bottom: 20px;
}

.active {
  color: var(--color-text);
}
</style>
